<template>
  <div>
    <div>
      <van-tabbar
        @change="onChange"
        route
        safe-area-inset-bottom
        active-color="#000"
        v-model="active"
      >
        <van-tabbar-item to="/home" class="position" @click="btnIndex=0,clickTest()">
          <img class="tabImage" src="../assets/image/首页.png" alt />
        </van-tabbar-item>
        <van-tabbar-item to="/classification" class="position" @click="btnIndex=1">
          <img class="tabImage" src="../assets/image/分类.png" alt />
        </van-tabbar-item>
        <van-tabbar-item icon="search" class="position"></van-tabbar-item>
        <van-tabbar-item to="/management" class="position" @click="btnIndex=2">
          <img class="tabImage" src="../assets/image/管理.png" alt />
        </van-tabbar-item>
        <van-tabbar-item to="/mine" class="position" @click="btnIndex=3">
          <img class="tabImage" src="../assets/image/我的.png" alt />
        </van-tabbar-item>
      </van-tabbar>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import NativeShare from "nativeshare";
// @ is an alias to /src
export default {
  components: {},
  data: () => ({
    btnIndex: 0,
    active: 0,
    nativeShare: null
  }),
  computed: {
    userInfo() {
      return JSON.parse(this.$store.state.memberInfo);
    }
  },
  created() {
    switch (this.$route.path) {
      case "/":
        this.btnIndex = 0;
        break;
      case "/classification":
        this.btnIndex = 1;
        break;
      case "/management":
        this.btnIndex = 3;
        break;
      case "/mine":
        this.btnIndex = 4;
        break;
    }
    let SessionUserinfo = JSON.parse(localStorage.getItem("userPwd"));
    //console.log(SessionUserinfo);
    //console.log(+new Date());
    if (SessionUserinfo) {
      if (SessionUserinfo.time > +new Date()) {
        this.Login(SessionUserinfo.userName, SessionUserinfo.password);
      } else {
        return false;
      }
    }

    if (!this.nativeShare) {
      this.$axios.notLoggedIn(`ym/public/wechat-share`).then(res => {
        console.log(res);
        console.log("获取wx签名成功");
        this.nativeShare = new NativeShare();
        this.nativeShare.setConfig({
          wechatConfig: {
            appId: res.appid,
            timestamp: res.timestamp,
            nonceStr: res.noncestr,
            signature: res.signature
          }
        });
        console.log(this.nativeShare);
        this.$store.commit("STORAGENATIVESHARE", this.nativeShare);
      });
    }
  },
  mounted() {
    let classIndex = document.getElementsByClassName("position");
    classIndex[this.btnIndex].style.background = "#fff";
  },
  watch: {},
  methods: {
    clickTest() {
      let classIndex = document.getElementsByClassName("position");
      classIndex.forEach(msg => {
        msg.style.background = "#E3E3E3";
        msg.style.borderRadius = 0;
      });
      classIndex[0].style.background = "#fff";
    },
    onChange(index) {
      //console.log(index);
      let classIndex = document.getElementsByClassName("position");
      classIndex.forEach(msg => {
        msg.style.background = "#E3E3E3";
        msg.style.borderRadius = 0;
      });
      classIndex[index].style.background = "#fff";
      // classIndex[index].style.borderRadius = "10px"
    },

    Login(name, pwd) {
      ////console.log("Login");
      this.$axios
        .login(
          `ym/oauth/token?username=${name}&password=${pwd}&grant_type=password&client_id=app&client_secret=app`
        )
        .then(msg => {
          if (msg.status === 200 && msg.data.code === 0) {
            this.$store.commit("SAVEUSERINFO", JSON.stringify(msg.data.data));
            this.getUserInfo();
          } else {
            //console.log("登录失败");
          }
        });
    },
    getUserInfo() {
      this.$axios.get(`ym/memberuser/user-info`).then(msg => {
        if (msg.code === 0) {
          this.$store.commit("SAVEMEMBERINFO", JSON.stringify(msg.data));
        } else {
          //console.log('获取用户信息失败！')
        }
      });
      // this.$axios.get(`ym/menu/list`).then(msg => {
      // });
    }
  }
};
</script>
<style lang="scss">
.activeBack {
  background: #e3e3e3 !important;
}
.tabImage {
  position: relative;
  width: 44px;
  height: 24px;
}
.position {
  position: relative;
  background: #e3e3e3;
}
.van-hairline--top-bottom::after {
  border-width: 0px 0;
}
.van-hairline-unset--top-bottom::after {
  border-width: 0px 0;
}
.van-hairline--top-bottom::after {
  border: 0 !important;
}
.van-hairline-unset--top-bottom::after {
  border: 0 !important;
}
</style>